<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style> 
            #div1{
                height: 100px;
                width: 100px;
                background: #000000;    
                position: relative;
                }
            #div2{ 
                height: 200px;
                width: 100px;
                background: #00A1D6;                
                display: none;
                position: absolute;
                left: 0;
                top: 130px;
                }    
        </style>
        <script>
            window.onload=function(){
            var a=document.getElementById('div1')
            var b=document.getElementById('div2')
            var x=null
        b.onmouseover=a.onmouseover=function(){
                b.style.display='block';
                clearTimeout(x);
            }
        b.onmouseout=a.onmouseout=function(){
            x=setTimeout(function(){b.style.display='none';
        },10000)
            }
            }
        </script>
    </head>
    <body>
        <div id="div1">        
            <div id="div2"></div>
        </div>        
    </body>
</html>
